<template>
  <div class="table-actions">
    <el-dropdown @command="handleCommand">
      <el-button type="primary" size="small">
        操作 <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="previewSql" :icon="View">预览SQL</el-dropdown-item>
          <el-dropdown-item command="createTable" :icon="Plus">创建表</el-dropdown-item>
          <el-dropdown-item command="preview" :icon="View" divided>预览代码</el-dropdown-item>
          <el-dropdown-item command="download" :icon="Download">下载代码</el-dropdown-item>
          <el-dropdown-item command="sync" :icon="Refresh">同步结构</el-dropdown-item>
          <el-dropdown-item command="edit" :icon="Edit" divided>编辑</el-dropdown-item>
          <el-dropdown-item command="delete" :icon="Delete" >删除</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import {ArrowDown, Delete, Download, Edit, Plus, Refresh, View} from '@element-plus/icons-vue'
import type {CodegenTableDTO} from '@/api/codegen'

interface Props {
  table: CodegenTableDTO
}

const props = defineProps<Props>()

const emit = defineEmits<{
  previewSql: [table: CodegenTableDTO]
  createTable: [table: CodegenTableDTO]
  generateCode: [table: CodegenTableDTO]
  preview: [table: CodegenTableDTO]
  download: [table: CodegenTableDTO]
  sync: [table: CodegenTableDTO]
  edit: [table: CodegenTableDTO]
  delete: [table: CodegenTableDTO]
}>()

const handleCommand = (command: string) => {
  switch (command) {
    case 'previewSql':
      emit('previewSql', props.table)
      break
    case 'createTable':
      emit('createTable', props.table)
      break
    case 'generateCode':
      emit('generateCode', props.table)
      break
    case 'preview':
      emit('preview', props.table)
      break
    case 'download':
      emit('download', props.table)
      break
    case 'sync':
      emit('sync', props.table)
      break
    case 'edit':
      emit('edit', props.table)
      break
    case 'delete':
      emit('delete', props.table)
      break
  }
}
</script>

<style scoped>
</style>